<template>
    <!-- 左侧是图片 右侧是前三名 -->
    <view class="rank-box" @tap="navToRank(rankList.id)">
      <view class="left">
        <image :src="rankList.coverImgUrl"></image>
      </view>
      <view class="right">
        <text class="single-row" v-for="(item,index) in rankList.tracks" :key='index'>{{index+1}}.{{item.first}}-{{item.second}}</text>
      </view>
    </view>
</template>

<script>
  export default {
    name:"rankingList",
    props:['rankList'],
    data() {
      return {
        
      };
    },
    methods:{
      // 页面跳转到rank
      navToRank(id){
        // 进行页面跳转传值
        uni.navigateTo({
          url:`../rank/rank?id=${id}`,
        })
      }
    }
  }
</script>

<style scoped>
  .rank-box{
    height: 214rpx;
    width: 100%;
    display: flex;
    margin-bottom: 26rpx;
  }
  .rank-box .left{
    width: 214rpx;
  }
  .rank-box .left image{
    width: 214rpx;
    height: 214rpx;
    border-radius: 8rpx;
  }
  
  .rank-box .right{
    box-sizing: border-box;
    padding: 22rpx;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    font-size: 26rpx;
    color: #6f6f6f;
  }
  .single-row{
    /* 要设置宽度才有效果 */
    width: 392rpx;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

</style>
